import { Feature } from "ol";
import Geometry from "ol/geom/Geometry";
import { Fill, Icon, Stroke, Style, Text } from "ol/style";
import svg from "../img/icon/位置.svg";

const pointHighlightStyle = (feature: any, resolution: number) => {
  const style = new Style({
    image: new Icon({
      crossOrigin: "anonymous",
      anchor: [0.5, 0.8],
      src: svg,
      scale: 0.2,
    }),
  });
  if (resolution < 0.000015) {
    style.setText(
      new Text({
        text: feature.get("名称"),
        offsetY: 6,
        textBaseline: "top",
        font: "11px bold",
      })
    );
  }
  return style;
};

const lineHighlightStyle = new Style({
  stroke: new Stroke({
    color: "#F00",
    width: 2,
  }),
  fill: new Fill({
    color: "#F00",
  }),
});

export function makeHighlight(feature: Feature<Geometry>) {
  const originalStyle = feature.getStyle();
  let highlightStyle = originalStyle;
  switch (feature.getGeometry()?.getType()) {
    case "Point":
      highlightStyle = pointHighlightStyle;
      break;
    case "LineString":
      highlightStyle = lineHighlightStyle;
      break;
  }
  return [
    () => feature.setStyle(highlightStyle),
    () => feature.setStyle(originalStyle),
  ];
}
